<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件上传示例</title>
    <style>
        body { font-family: Arial, sans-serif; }
        .upload-btn {
            background-color: #4CAF50;
            border: none;
            color: white;
            padding: 10px 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
            border-radius: 4px;
        }
        .upload-btn:hover {
            background-color: #45a049;
        }
        .file-input {
            display: none;
        }
    </style>
</head>
<body>
<button id="uploadButton" class="upload-btn">
    <i class="fa fa-upload"></i> 选择图片
</button>
<input type="file" id="fileInput" class="file-input" accept="image/*">
<div id="previewContainer" style="margin-top: 20px;"></div>

<script>
    document.getElementById('uploadButton').addEventListener('click', function() {
        document.getElementById('fileInput').click();
    });

    document.getElementById('fileInput').addEventListener('change', function(e) {
        const file = e.target.files[0];
        if (!file) return;

        // 显示文件信息
        const previewContainer = document.getElementById('previewContainer');
        previewContainer.innerHTML = `
                <div>
                    <p>文件名: ${file.name}</p>
                    <p>大小: ${(file.size / (1024 * 1024)).toFixed(2)} MB</p>
                    <img src="${URL.createObjectURL(file)}" alt="预览图" style="max-width: 300px; margin-top: 10px;">
                </div>
            `;

        // 模拟上传（实际使用时需替换为真实API调用）
        simulateUpload(file);
    });

    function simulateUpload(file) {
        // 这里应该替换为实际的API调用
        // 例如：
        fetch('http://localhost:8010/survey/02/compress',
            { method: 'POST', body: file })
        console.log('正在上传文件:', file.name);


        // 模拟上传完成
        setTimeout(() => {
            console.log('上传完成');
            alert('文件上传成功！');
        }, 1500);
    }
</script>
</body>
</html>